/**
 * Created by Efim Matytsin on 28.02.15.
 */
var Workspace = Backbone.Router.extend({

    routes: {
        "profile(/id:id)": "profile"
    },


    submitTweetPost:function(){

        var url = "/profile/posts/new"; // the script where you handle the form input.

        $.ajax({
            type: "GET",
            url: url,
            data: $(".jsPostForm").serialize(), // serializes the form's elements.
            success: this.addPostCallback.bind(this)
        });

        return false; // avoid to execute the actual submit of the form.
    },


    addPostCallback: function(data){
        this.postsCollection.add(new PostModel(data));
        $(".jsPostForm").find("input[type=text], textarea").val("");
    },


    profile: function(id) {
        this.postsCollection = new PostCollection();
        this.postsCollection.url = '/profile/posts/'+id;
        this.postsCollection.fetch();
        var baseView = new BasePostsView({collection:this.postsCollection});
        $(".jsPostContainer").html(baseView.render().el);
        $(".jsPostForm").submit(this.submitTweetPost.bind(this));
    }

});

var PostModel = Backbone.Model.extend();

var PostCollection = Backbone.Collection.extend({
    model: PostModel
});

var PhotoView = Backbone.View.extend({

    tagName: "div",

    className: "card",

    template: _.template(_.unescape($('#photoTemplate').html())),

    initialize: function() {
       // this.listenTo(this.model, "change", this.render);
    },

    render: function() {
        $(this.el).html(this.template(this.model));
        return this;
    }

});

var TweetView = Backbone.View.extend({

    tagName: "div",

    className: "card blue-grey darken-1",

    template: _.template(_.unescape($('#tweetTemplate').html())),

    initialize: function() {
        //this.listenTo(this.model, "change", this.render);
    },

    render: function() {
        $(this.el).html(this.template(this.model));
        return this;
    }

});

var PostView = Backbone.View.extend({

    tagName: "div",

    className: "col s12 m6",

    initialize: function() {

    },

    render: function() {
        var view = null;
        if(this.model.get("type") === "tweet"){
            view = new TweetView({model:this.model.get("item")});
        }
        if(this.model.get("type") === "photo"){
            view = new PhotoView({model:this.model.get("item")});
        }
        $(this.el).html(view.render().$el);
        return this;
    }

});

var BasePostsView = Backbone.View.extend({

    tagName: "div",

    className: "row",

    collection:PostCollection,


    initialize: function() {
        this.collection.on("add",this.renderPost.bind(this));
    },

    render: function() {
        this.collection.each(this.renderPost.bind(this));
        return this;
    },

    renderPost: function(post){
        var postView = new PostView({model:post});
        this.$el.append(postView.render().$el);
    }

});

$(document).ready(function(){
    $('.materialboxed').materialbox();
    new Workspace();
    Backbone.history.start({pushState: true});
});